<!DOCTYPE html>
<html>
<head>
<#include "/common/common.ftl" parse=true encoding="utf-8">
<style>
body {
	background-color: #F3F3F3;
}

.tab-pane {
	padding-top: 20px;
	background-color: #fff;
	padding-left: 20px;
}

.nav a {
	color: #b7b9bd;
}

.nav:hover a {
	color: #CCC;
}

.nav span {
	margin-right: 20px;
	font-size: 10px;
	color: #999;
	float: right;
}

hr {
	margin-top: 8px;
}

.form-control1 {
	display: block;
	height: 34px;
	padding: 6px 12px;
	font-size: 14px;
	line-height: 1.42857143;
	color: #555;
	background-color: #fff;
	background-image: none;
	border: 1px solid #ccc;
	border-radius: 4px;
	-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
	box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
	-webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow
		ease-in-out .15s;
	-o-transition: border-color ease-in-out .15s, box-shadow ease-in-out
		.15s;
	transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
	-o-transition: border-color ease-in-out .15s, box-shadow ease-in-out
		.15s;
}

.setSecurity {
	margin-top: 50px;
	margin-bottom: 50px;
}

.submit {
	margin-top: 10px;
	margin-left: 64px;
}

.securityExplain {
	margin-bottom: 40px;
}

#setSecurity1 {
	font-size: 18px;
}

#setSecurity3 {
	font-size: 18px;
	margin-right: 10px;
	margin-left: 10px;
}
</style>
</head>
<body>
<#include "/common/header.ftl" parse=true encoding="utf-8">
	<div class="container body_content">
		<div class="row">
			<div class="col-md-2" id="set"><#include
				"/personal/account/sidebar.ftl" parse=true encoding="utf-8"></div>
			<div class="col-md-10">
				<div class="col-md-offset-1 col-md-11 tab-pane form-horizontal"
					id="setForm" style="margin-bottom: 40px;">
					<div class="nav" id="setSecurity">
						<a class="active text-right" id="setSecurity1"
							href="#modifyPasswordForm">修改密码</a> <a id="setSecurity3"
							href="#Security" style="display: none;">修改密保</a> <span>最后登录IP：${entity.lastestLoginIp!}</span>
						&nbsp;&nbsp; <span>最后登录时间：${entity.lastestLoginTime!}</span>
						&nbsp;&nbsp; <span>总登录次数：${entity.totalLoginNum!}</span>
						<hr>
					</div>
					<div id="myTabContent1" class="tab-content">
						<form class="tab-pane active form-horizontal"
							id="modifyPasswordForm">
							<div class="form-group setSecurity">
								<label class="col-sm-2 control-label">旧密码</label>
								<div class="col-sm-4">
									<input id="oldPassword" name="oldPassword" type="password"
										class="form-control" placeholder="旧密码">
								</div>
							</div>
							<div class="form-group setSecurity">
								<label class="col-sm-2 control-label">新密码</label>
								<div class="col-sm-4">
									<input id="newPassword" name="newPassword" type="password"
										class="form-control" placeholder="新密码">
								</div>
							</div>
							<div class="form-group setSecurity">
								<label class="col-sm-2 control-label">确认新密码</label>
								<div class="col-sm-4">
									<input id="confirmPassword" name="confirmPassword"
										type="password" class="form-control" placeholder="确认新密码">
								</div>
							</div>
							<div class="form-group">
								<div class=" col-sm-offset-9 col-sm-2">
									<button type="submit" class="btn btn-primary">修改</button>
									<button type="reset" class="btn btn-primary" onclick="returnAccountSetting();">取消</button>
								</div>
							</div>
						</form>
					</div>
				</div>
			</div>
		</div>
	</div>

	<#include "/common/footer.ftl" parse=true encoding="utf-8">
	<script src="${base}/scripts/js/md5.min.js"></script>
	<script type="text/javascript">
		$(function() {
			$('#setSecurity a[href="#modifyPasswordForm"]').tab('show')
			$('#setSecurity a').click(function(e) {
				var $li = $('#setSecurity a');
				e.preventDefault();
				$li.removeClass();
				$(this).addClass('text-right');
				$(this).tab('show');
			})
		})
		
		function returnAccountSetting(){
		window.location =  "${base}/member/account/baseInfo.do";
	}

		$('#modifyPasswordForm')
				.bootstrapValidator(
						{
							message : '该项不能为空',
							live : 'disabled',
							feedbackIcons : {
								valid : 'glyphicon glyphicon-ok',
								invalid : 'glyphicon glyphicon-remove',
								validating : 'glyphicon glyphicon-refresh'
							},
							
		submitHandler : function(validator, form,
									submitButton) {
								if (window.confirm("您确定要修改密码？")) {
									var url = '${base}/member/account/modifyPasswordAction.json';
									var entity = {
										oldPassword : md5($(
												"#modifyPasswordForm #oldPassword")
												.val()),
										newPassword : md5($(
												"#modifyPasswordForm #newPassword")
												.val())
									};
									var onloadFunc = function(result) {
										if (result.isSuccess === true) {
											alert("修改成功！");
											history.go(0);
										} else {
											alert(result.message);
										}
									}
									httpRequestPostJson(url, entity, false,
											onloadFunc);
								} else {
									return;
								}

							},
							fields : {
								oldPassword : {
									message : '原始密码无效',
									validators : {
										notEmpty : {
											message : '原始密码不能为空'
										},
										stringLength : {
											min : 6,
											max : 12,
											message : '原始密码的长度介于6-12字符之间'
										}
									}
								},
								newPassword : {
									validators : {
										notEmpty : {
											message : '新密码不能为空'
										},
										stringLength : {
											min : 6,
											max : 12,
											message : '新密码的长度介于6-12字符之间'
										}
									}
								},
								confirmPassword : {
									validators : {
										notEmpty : {
											message : '确认密码不能为空'
										},
										stringLength : {
											min : 6,
											max : 12,
											message : '确认密码的长度介于6-12字符之间'
										},
										identical : {
											field : 'newPassword',
											message : '两次输入的密码不一致'
										}
									}
								}
							}
						});
	</script>
</body>